
<template>
    <div style="display: block">
        <el-form ref="formInline" :model="formInline" :rules="ruleInline" style="float: left">
            <el-form-item prop="user" style="float: left">
                <el-input type="text" v-model="formInline.user" placeholder="用户名" style="float: left">用户名</el-input>
            </el-form-item>
            <el-form-item style="float: left">
                <el-button type="primary" @click="searchUsers"  style="float: left;margin-left: 10px;">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="data1"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="用户id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="user_name"
                    label="用户名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="用户手机">
            </el-table-column>
            <el-table-column
                    prop="email_address"
                    label="邮件">
            </el-table-column>
            <el-table-column
                    prop="avatar"
                    label="头像">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    //组件修改的模板
    import axios from '@/api/ajax.js'
    import store from '@/store/index.js'
    import Cookie from 'js-cookie'
    import Const from '@/const.js'
    import  Table from 'element-ui/lib/table'
    import  TableColumn from 'element-ui/lib/table-column'
    import Vue from "vue/dist/vue.js";
    Vue.use(Table);
    Vue.use(TableColumn);
    import { userInfo } from 'os';
    export default {
        name: "tes",
        data:() => {
            return{
                limit:10,
                offset :0,
                formInline: {
                    user: '',
                    type: ''
                },
                ruleInline: {
                    user: [
                        {  message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string'}
                    ]
                },
                data1: [
                ]
            }
        },
        methods: {
            searchUsers(){
                let userInfo = JSON.parse(Cookie.get(Const.KEY_USER_INFO));
                axios.post('/search_users?limit=' + this.limit + '&offset='  + this.offset+ '&userid='
                    +  userInfo['ID'] + '&token=' +  userInfo['SocketToken'],{
                    username:this.formInline.user
                }).then(response=> {
                            console.log(response.data);
                            if (response.data.Status === 0)
                            {
                                this.data1 = [];
                                this.data1.push(response.data.Data.users[0])
                            }
                        }
                    ).catch(reason => {
                        //this.$Message("网络错误:" + reason);
                });
            }
        },
        created(){
            console.log(Cookie.get("sess_store"))
            let userInfo = JSON.parse(Cookie.get(Const.KEY_USER_INFO));
            let url = '/users?limit=' + this.limit + '&offset='  + this.offset  + '&userid='
                +  userInfo['ID'] + '&token=' +  userInfo['SocketToken'] ;
            axios.get(url)
                .then(response=> {
                    console.log(response.data);
                    if (response.data.Status === 0){
                            this.data1.push(response.data.Data.users[0])
                    }
                    else {
                        this.$router.push("/login");
                    }
                    }
                )
        },
        activated() {
            console.log("activated");
        }
    }
</script>
<style scoped>

</style>
